<!--  -->
<template>
<div class=''>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
         <el-alert
    title="只能选择三级商品分类哦"
    type="warning"
    :closable="showFlag"
    show-icon
   >
  </el-alert>
      <span>选择商品分类:</span>
    <el-cascader
    v-model="selectGoodsKey"
    :options="goodsList"
    :props="{ expandTrigger:'hover',value:'id',label:'goodsname',children:'children',checkStrictly:false}"
    @change="handleChange"></el-cascader>
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="only">
      <el-button type="primary" size=“mini :disabled="showFlag" @click="addParams()">添加参数</el-button>
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="many">
           <el-button type="primary" size=“mini :disabled="showFlag" @click="addAttribute()">添加属性</el-button>
           </el-tab-pane></el-tabs>
    <el-table
      :data="activeName=='only'?onlyData:manyData"
      style="width: 100%"
      border stripe>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-tag type="success" v-for="(item,index) in scope.row.children" :key="index" closable @close="closetag(scope.row,index)">{{item.goodstag}}</el-tag>
         <el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="#"
       >
      </el-table-column>
      <el-table-column
        prop="goodsname"
        label="参数名称"
     >
      </el-table-column>
      <el-table-column
        label="操作"
        >
        <template>
           <el-button icon="el-icon-edit" size="mini" type="primary">编辑</el-button>
           <el-button icon="el-icon-delete" size="mini" type="warning">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="50%"
  @close = "closeDialog()"
 >
  <el-form :model="parmasData" :rules="parmasDataRules" ref="ruleForm" label-width="110px" >
  <el-form-item :label='"添加"+titleText' prop="ParmasgoodstagRe">
    <el-input v-model="parmasData.ParmasgoodstagRe"></el-input>
  </el-form-item></el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addTages()">确 定</el-button>
  </span>
</el-dialog>




</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  goodsList:[],
  selectGoodsKey:[],
  activeName:'only',
  onlyData:[],
  manyData:[],
  dialogVisible:false,
  parmasData:{
    ParmasgoodstagRe:''//什么傻逼玩意你为什么要和下面的名字一样
  },
  parmasDataRules:{
    ParmasgoodstagRe:[//和上面的傻逼名字一样
       {required:true,message:"请输入属性名称",trigger:"blur"},
    ]
  },
  inputVisible:false,
  inputValue:''
};
},
//监听属性 类似于data概念
computed: {
  showFlag(){
     return this.selectGoodsKey.length!==3
  },
  titleText(){
    if(this.activeName=='only'){
      return '动态参数'
    }else{
      return '静态属性'
    }
  },
  

},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  async requestGoods() {
      let { data: res } = await this.$http.get("/goods");
      console.log(res);
      if (res.err == 0) {
        this.$message.success("数据请求成功");
        this.goodsList = res.data;
      } else {
        this.$message.error("数据请求失败");
      }
    },
    handleChange(){
      if(this.selectGoodsKey.length!==3){
          this.selectGoodsKey = []
          this.showFlag = true
          return 
      }else{
         this.getRequestParmas()
      }
       console.log(this.selectGoodsKey);
    },
    handleClick(){
      console.log(this.activeName);
      this.getRequestParmas()
    },
    async getRequestParmas (){
      let type = {type:this.activeName}
      if(this.selectGoodsKey.length==3){
         let {data:res} =await this.$http.get('/goodsParmas',{params:type})
          console.log(res);
      if(res.err==0){
        this.$message.success("数据请求成功")
        if(this.activeName=='only'){
          this.onlyData = res.data
        }else{
          this.manyData = res.data
        }
      }
      }
     
    },
    addParams(){
      
      this.dialogVisible = true
    },
    addAttribute(){
       this.dialogVisible = true
    },
    closeDialog(){
      this.$refs.ruleForm.resetFields()
    },
    async addTages(){
      let parmas = {type:this.activeName,val:this.parmasData.ParmasgoodstagRe}
      let {data:res} =await this.$http.get("/goodsParmas/addParmas",{params:parmas})
      console.log(res);
      if(res.err==-1){
        this.$message.warning(res.msg)
      }else if(res.err==0){
        this.$message.success(res.msg)
        this.requestGoods()
      }
      this.dialogVisible = false
      
    },
   async handleInputConfirm(){
      console.log(1111111111);
      var val =  this.inputValue
      console.log(val);
      if(val.trim().length!==0){
        let parmas = {type:this.activeName,val:val}
        let {data:res} =await this.$http.get("/goodsParmas/addParmas",{params:parmas})
        console.log(res);
          this.getRequestParmas()
      }
      this.inputVisible = false
      this.inputValue = ''
    
    },
    showInput(){
      this.inputVisible =  true
      this.$nextTick(_=>{//this.$nextTick似乎很好用
         this.$refs.saveTagInput.$refs.input.focus();
      })
    },
   async closetag(e,i){
      let parmas = {type:this.activeName,val:e.children[i].goodstag}
    const {data:ret}  = await this.$http("/goodsParmas/delete",{params:parmas})
      console.log(ret);
    if(ret.err==0){
      this.$message.success(ret.msg)
      this.getRequestParmas()
    }
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.requestGoods()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
deactivated() {}
}
</script>
<style  scoped>
  .el-alert{
    margin:15px
  }
  span{
    margin: 5px;
  }
  .el-button {
    margin: 15px;
  }
  .input-new-tag{
    width: 120px;
  }
</style>